<template>
	<view class="contain content">
		<!-- 搜索 -->
		<view class="w-[100%] flex justify-center items-center search">
			  <view class="w-[90%] m-auto my-2">
				  <u-search 
				  @blur="SearchKeyWord" 
				  @search="SearchKeyWord"
				  @custom="SearchKeyWord"
				  placeholder="输入产品关键词" 
				  borderColor="#f1f1f1" 
				  inputAlign="center" 
				  bgColor="#f8f8f8" 
				  :showAction="true">
				  </u-search>
			 </view>
		</view>
		<view class="navigationBar">
			<view class="item" :class="curIndex===0?'selected':''" @click="select(0)">综合</view>
			<view class="item" :class="curIndex===1?'selected':''" @click="select(1)">最新</view>
			<view class="item">
				<view :class="curIndex===2?'selected':''" @click="select(2)">价格</view>
				<view>
					<view class="up"><u-icon name="play-right-fill" :color="upColor" size="9"></u-icon></view>
					<view class="down"><u-icon name="play-left-fill" :color="downColor" size="9"></u-icon></view>
				</view>
			</view>
			<view class="item" :class="curIndex===3?'selected':''" @click="select(3)">销量</view>
		</view> <!-- navigationBar -->
		
		<!-- 搜索商品结果 -->
		<Searchproduct :keyWord="keyword" :changIndex="curIndex" :priceUp="priceUp"></Searchproduct>
		
	</view>
</template>

<script setup lang='ts'>
import { ref } from 'vue'
import type {IProductsType} from '@/utils/apiFunction'
import {onShow,onLoad } from '@dcloudio/uni-app'

let aa:IProductsType={
	productId:"111",
	productName:"222"
}
console.log(aa);

let keyword=ref('');
const curIndex=ref(0);
const blueColor=ref("#3F95FC");
const grayColor=ref("#CCCCCC");
const downDir=ref(false);
const upColor=ref(blueColor.value);
const downColor=ref(grayColor.value);
let priceUp=ref(true); //价格上下排序
const changIcon=():void=>{
	downDir.value=!downDir.value;
	if(downDir.value==false){
		upColor.value=blueColor.value;
		downColor.value=grayColor.value;
	}else{
		upColor.value=grayColor.value;
		downColor.value=blueColor.value;
	} 	
}
const select=(index:number)=>{
	console.log("当前切换值:",index);
	curIndex.value=index;
	if(index===0){ //显示全部商品
		keyword.value="all";
	}
	if(index===2){
		priceUp.value=!priceUp.value;
		changIcon();
	}
}

const SearchKeyWord=(e:any)=>{
	console.log("要搜索的值",e);
	keyword.value=e; //待手指离开后再赋值
}


onLoad((opt)=>{
	if(opt.key!=null && opt.key!=''){
		console.log("要查询的关键字:",opt.key)
		keyword.value=opt.key;
	}else{
		keyword.value="all";
	}	
})

</script>

<style lang='scss' scoped>
	@import "finalSearchProduct.scss";
</style>